<template>
  <a-modal
  class="withdraw-charge-modal"
  :visible="visible"
  :title="title"
  :maskClosable="false"
  :destroyOnClose="true"
  :keyboard="false"
  :closable="false"
  :confirmLoading="confirmLoading"
  width="70%"
  @cancel="closeModal(false)"
  @ok="handleSubmit">
    <a-descriptions title="" bordered :column="2">
      <a-descriptions-item label="提现发起时间">
        {{ formData.createDate }}
      </a-descriptions-item>
      <a-descriptions-item label="提现到账时间">
        {{ formData.updateDate }}
      </a-descriptions-item>
      <a-descriptions-item label="类型">
        提现
      </a-descriptions-item>
      <a-descriptions-item label="交易名称">
        {{ formData.transactionName }}
      </a-descriptions-item>
      <a-descriptions-item label="交易订单号">
        {{ formData.transId }}
      </a-descriptions-item>
      <a-descriptions-item label="收款账户">
        {{ formData.cardNo }}
      </a-descriptions-item>
      <a-descriptions-item label="交易金额">
        ¥ {{ formData.withdrawPrice | $number2Price }}
      </a-descriptions-item>
      <a-descriptions-item label="手续费金额">
        ¥ {{ formData.fee | $number2Price }}
      </a-descriptions-item>
      <a-descriptions-item label="户名">
        {{ formData.userName }}
      </a-descriptions-item>
      <a-descriptions-item label="收款行名">
        {{ formData.bankName }}
      </a-descriptions-item>
    </a-descriptions>
    <template slot="footer">
      <a-button key="back" @click="closeModal(false)"> {{ handle == 'view' ? '返回' : '取消' }} </a-button>
      <a-button :loading="confirmLoading" v-if="handle != 'view'" key="submit" type="primary" @click="handleSubmit"> 提交 </a-button>
    </template>
  </a-modal>
</template>

<script>
import deepCopy from '@/utils/deepCopy'

const formData={}

export default {
  name: 'withdrawChargeForm',
  props: {
    handle: { // 操作类型
      type: String,
      default: 'edit'
    },
    record: { // 选中行数据
      type: Object,
      default () {
        return {}
      }
    },
    visible: { // 是否显示弹窗
      type: Boolean,
        default: false
    },
  },
  data() {
    return {
      confirmLoading: false, // 提交等待
      formData,
      disabled: false, // 表单禁用状态
      rules:{ // 表单验证规则
      }
    };
  },
  computed: {
    title() { // 弹窗标题
      let res = ''
      switch (this.handle) {
        case 'add':
          res = '添加'
          break;
        case 'edit':
          res = '编辑'
          break;
        case 'view':
          res = '查看'
          break;
        default:
          res = '操作'
          break;
        }
      return res
    }
  },
  watch: {
    // 监听弹窗显示，回显数据
    visible(value) {
      if (value && this.record.id) {
        this.$nextTick(()=> {
          this.formData = deepCopy(this.record)
        })
      } else {
        this.resetData()
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 重置
    resetData(){
      this.formData=deepCopy(formData);
    },
    // 提交
    handleSubmit() {
      let _this = this
      this.confirmLoading = true;
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.confirmLoading = false;
          console.log(_this.formData)
          _this.closeModal(true);
        } else {
          this.confirmLoading = false;
          return false;
        }
      });
    },
    // 取消
    closeModal(bool) {
      this.$emit('cancel', bool)
    }
  }
};
</script>

<style lang="less">
.withdraw-charge-modal{
  .ant-descriptions-bordered .ant-descriptions-item-label{
    width: 150px;
  }
}
</style>
